Programmeren 5

VOS - Definitie, ontwerp en realisatie CSS

Doelstelling

1. In de les gaan we ons voorbereiden om een Cordova app te maken. Na deze les weet je weer genoeg van CSS om een onepage app te maken die geschikt is om over te zetten naar Cordova. De CSS die we in de les leren ben je niet verplicht zelf toe te passen in de app die we gaan maken. Je mag een eigen lay-out ontwerpen maar die moet aan functionele vereisten voldoen.
2. We doorlopen de definitie- en ontwerpfase van de Veilig op school Cordova app.
3. Na deze les:
   1. weet je hoe een app realiseert vertrekkend van een definitie en een ontwerp;
   2. kan je met behulp van tower pattern de nodige HTML en CSS regels creëren om de VOS - wireframes te realiseren;

Leerpad

De Veilig op school (VOS) applicatie

1. definitiefase
2. ontwerpfase
3. realisatiefase: in de realisatiefase begint men aan het bouwen van het projectresultaat en wordt het project zichtbaar. Programmeurs zijn aan het coderen, designers zijn bezig beeldmateriaal te ontwikkelen, ... Voor de buitenstaanders lijkt het alsof het project nu pas gestart is. Het is de ‘doe’ fase. We beginnen met de indeling en de opmaak:
   1. Het tower-pattern is een naam die ik geef aan een bepaalde manier van CSS opmaak. Het is veel gemakkelijker om CSS te maken als je een visuele voorstelling voor je opmaak in je hoofd hebt. In dit geval is dat een toren of een flatgebouw. De website is een toren met daarin pagina's die je kan voorstellen als verdiepingen. Elke verdieping beschikt over een controlepaneel en een showroom. Met het controlepaneel kan je navigeren naar andere verdiepingen en in de showroow kan je dingen laten zien aan de gebruiker. Deze dingen stel ik voor als tegels op een muur met extra uitleg als over je over een tegel zweeft. Als je op de tegel klikt kan je iets op die verdieping - pagina - achter de schermen - showroom - doen.
   2. HTML: De HTML maken we op basis van VOS - wireframes. We passen het tower pattern toe. Hoe je EMMET gebruikt leer je op EMMET Cheat Sheet.
   3. filmpje: VOS wireframe omzetten naar HTML. In het fillmpje heb ik de map www in de vos map geöpend in Visual Studio Code met File->Open Folder. Je kan die map ook openen in Visual Studio maar dan kan je emmet niet gebruiken. Als je het Vos project in Visual Studio openent open je alleen de www map als een directory en niet als een project!
   4. CSS: filmpje VOS opmaak met CSS
   5. De HTML en CSS vind je in mijn workspace op Cloud9.

Opdracht

1. Maak de HTML en de CSS voor de home pagina van de VOS app. Je doet dit best lokaal in een editir naar keuze (Visual Studio, Visual Code, PHPStorm of PHPWeb). Je mag ook een eigen CSS ontwerp maken en realiseren, of met een framework als Bootstrap werken.
2. Synchroniseer alleen de WWW map met Bitbucket en Cloud9. In de commit message staat: "VOS Home pagina HTML en CSS".
3. Stuur een tekstbestand door via onderstaande link met een link naar Cloud9 en Bitbucket.
4. Installeer de app op je toestel (deadline voor dit onderdeel is dag van het examen).